<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>nodom-example start</title>
	</head>

	<body>
    </body>
	<script type='module'>
		import{Nodom,Module} from '/dist/nodom.esm.min.js'
        import {M1} from './modules/m1.js'
        /*class M1 extends Module{
            template(){
                return `
                    <div style='background-color:lightblue' class='m1' role='m1'>
                        This is M1 <br>
                        <slot/>
                    </div>
                `
            }
        }*/

        class M2 extends Module{
            template(){
                return `
                    <div style='background-color:red'>
                        This is m2 <br>
                        <slot />
                    </div>
                `
            }

            clickM2(){
                console.log('m2click method belongs to M2');
            }

            getP2(){
                return 'prop2 from module m2';
            }

            getText(){
                return 'text from module m2';
            }

        }

        class M3 extends Module{
            template(){
                return `
                    <div style='background-color:yellow;' e-click='clickM3'>
                        This is m3 <br>
                        <slot innerrender/>
                    </div>
                `
            }

            clickM3(){
                console.log('m3click method belongs to M3');
            }

            getP3(){
                return 'prop3 from module m3';
            }

            getText(){
                return 'text from module m3';
            }

            clickSpan(){
                console.log('span click method belongs to M3');
            }
        }
        /**
		 * 模块定义
		 */
		class MMain extends Module{
            modules=[M1,M2,M3];
			/**
			 * 模版函数
			 */
			template(){
                return `
				    <div>
                        <h2>多模块嵌套</h2>
                        <h3>单个module</h3>
                        <button e-click='changeText'>修改text</button>
                        <button e-click='getM2'>获取第一个M2模块</button>
                        <button e-click='getM21'>获取第二个M2模块</button>
                        <button e-click='getEl'>获取第一个class='cls2'的DIV</button>
                        <m1 p1={{getP1(a,b)}} e-click='clickM1'>
                            m1 slot
                            <p>{{getText()}}</p>
                        </m1>
                        <h3>嵌套slot</h3>
                        <m1 p1={{getP1(a,b)}} class='cls1' role='mtest'>
                            m1 text is:{{getText(a,b)}}
                            <m2 p2={{getP2()}} e-click='clickM2'>
                                m2 text is:{{getText()}}
                            </m2>
                        </m1>
                        <div class='cls2'>我是class='cls2'的div</div>
                    </div>
				`
			}

			/**
			 * 数据函数
			 */
			data(){
				return{
					name:'nodom3',
                    text:'origin text',
					hobbies:[
						{title:'健身'},
						{title:'美食'},
						{title:'旅游'}
					]
				}
			}	

			getP1(){
                return 'prop1 from module main';
            }

            getP2(){
                return 'prop2 from module main';
            }

            getP3(){
                return 'prop3 from module main';
            }

            getText(){
                return this.model.text +' from module main';
            }

            clickM1(){
                console.log('m1click method belongs to Main');
            }
            
            clickM2(){
                console.log('m2click method belongs to Main');
            }

            clickM3(){
                console.log('m3click method belongs to Main');
            }

            clickSpan(){
                console.log('span click method belongs to Main');
            }

            changeText(){
                this.model.text = 'changed value';
            }

            getM2(){
                const m = this.getModule('M2',true);
                console.log(m);
            }

            getEl(){

                const dom = this.domManager.getRenderedDom({class:'cls2'});
                console.log(dom.node);
            }
       	}
    	Nodom.app(MMain);
	</script>
</html>
